<template>
  <!-- <div>墒情信息</div> -->
  <SubTitle>
        <template #subtitle>墒情信息</template>
      </SubTitle>
  <div class="moistureinformation" ref="moistureinformation"></div>
</template>

<script>
import * as echarts from "echarts";
import SubTitle from "./SubTitle.vue";
import { getmoistureinfo } from "@/api";
import { changestring } from '@/assets/js/common';
export default {
  data(){
    return {
      timearr:[],
      temperaturearr:[],
      moisturearr:[],
    }
  },
  created(){
    this.Getmoistureinfo();
  },
  components:{
    SubTitle
  },
  methods:{
    async Getmoistureinfo() {
           await getmoistureinfo("/climate_condition/cliamteData")
            .then((Response) => {
              console.log("R",Response.data);
              var timeArr = new Array();
              // var pestnumber = new Array();
              var temperatureArr = new Array();
              var moistureArr = new Array();
              for(let i=0;i<Response.data.length;i++){

                 timeArr[i] = Response.data[i].getdate;
                 let a = JSON.parse(Response.data[i].entity);
                 console.log(a);
                 temperatureArr[i] = Number(a[0].eValue);
                 moistureArr[i] = Number(a[1].eValue);
              }
              this.timearr = timeArr;
              this.temperaturearr = temperatureArr;
              this.moisturearr = moistureArr;
              setTimeout(() => {
                console.log("time",this.timearr);
                console.log("tem",this.temperaturearr);
                console.log("moi",this.moisturearr);
              }, 100);
             
            });
        },
  },
  mounted() {
    setTimeout(() => {
      let moistureinformation = echarts.init(this.$refs.moistureinformation);
    let xData = this.timearr;
    //  ["3日", "4日", "5日", "6日", "7日"];
    let yDataone = this.temperaturearr;
    //  [0.5, 0.7, 0.6, 0.8, 0.5];
    let yDatatwo = this.moisturearr;
    // [11.2, 14.3, 15.5, 12.1, 13];
    let option = {
      title: {
        text: "",
      },
      xAxis: {
        data: xData,
        inverse:true,
        type: "category", //value 数据轴，category 类目轴
        axisLabel:{
          color:"skyblue",
          fontSize:'14px'
        }
      },
      yAxis: {
        splitLine:{
            lineStyle:{
                type:'dashed'
            }
        },
        axisLabel:{
          color:"yellow",
          fontSize:'14px'
        }
        
      },
      legend:{
        textStyle:{
          color:"white",
          fontSize:"16px"
        }
      },
      series: [
        {
          //图表类型
          name: "温度",
          type: "bar", //图表类别
          // type: "line", //图表类别
          itemStyle:{
           color:'#FFFF00'
          },
          data: yDataone,
          barWidth:30,
  	               barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
  	               barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
          label: {
            show: true,
            position: "top",
          },
          
        },
        {
          //图表类型
          name: "湿度",
          // type: "line", //图表类别
          type: "bar", //图表类别
          itemStyle:{
           color:'#0099CC'
          },
          data: yDatatwo,
          barWidth:30,
          label: {
            show: true,
            position: "top",
          },
          
        },
      ],
    };
    moistureinformation.setOption(option);
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
.moistureinformation{
    width: 100%;
    height: 290px;
}
@media screen and (max-width: 720px) {
    .moistureinformation{
      width: 100%;
      height: 300px;
    }
  }
</style>